<!-- 集群检查 -->
<template>
    <a-row >
        <a-row class='mytitle'>
            <!-- <a-icon :component = "check" style="margin:0 .5rem 0 0"/> -->
            {{$t('Cluster-check')}}
        </a-row>
        <a-card style='margin:1em' v-userAuth="'E2'">
            <a-tabs defalutActiveKey='1' >
                <a-tab-pane :tab="$t('Node')+$t('Service-check')" key='1'>
                    <!-- v-userAuth="'E3'" -->
                    <NoAuthPage v-showNoAuth="'E3-1'" :imgBoxStyle="{height:'40vh',margin:'10px'}"/>
                    <div v-userAuth="'E3-1'">
                    <a-row class="check">
                        <a-col :xs='5' :sm='5' :md='5' :lg='5' :xl='3' style="text-align:center">
                            <img 
                                ondragstart="return false"
                                oncontextmenu="return false"
                                src='../../../../static/images/GIF/ic_rader.gif' class="gif" v-if="imgsrc == true"
                                alt="scan_img"
                            >
                            <img 
                                ondragstart="return false"
                                oncontextmenu="return false"
                                src='../../../../static/images/png/ic_radar_02.png' class="gif" v-if="imgsrc == false"
                                alt="scan_img"
                            >
                        </a-col>
                        <a-col :xs='7' :sm='7' :md='12' :lg='10' :xl='5' style="margin-top:2rem">
                            <h2><b>{{$t('Node')+$t('Service-check')}}：</b></h2>
                            <!-- <p>Total: 61 passed , 2 failed , on 7 hosts</p> -->
                            <p v-if="$store.state.language == 'zh'">{{clusterdata.cluster_ch}}</p>
                            <p v-else>{{clusterdata.cluster_en}}</p>
                        </a-col>
                        <a-col :xs='{span:2,offset:2}' :sm='{span:2,offset:2}' :md='{span:2,offset:2}' :lg='{span:2,offset:6}' :xl='{span:2,offset:14}' style="margin-top:2rem">
                            <a-button v-userAuth="'E3-2'" type='primary' @click="scan">{{$t('Scan-now')}}</a-button>
                        </a-col>
                    </a-row>
                    <a-row :gutter='8' style="margin:0">
                        <p class='val'>{{$t('Test-result')}}</p>
                        <a-col style='margin-bottom:.5rem;'>
                            <a-collapse v-model="activeKey" style="display: flex; flex-wrap: wrap"><!--justify-content: space-around;-->
                                <a-collapse-panel :header='a.title' style="width: 33%" :key='a.key' v-for='a in clusterdata.services'>
                                    <a-tabs type='card'>
                                        <a-tab-pane key='1'>
                                            <span slot="tab">
                                                <!--出错节点-->
                                                <a-icon type="exclamation-circle" theme='filled' style="color:red" />
                                                {{$t('Error')}}{{$t('Node')}}
                                            </span>
                                            <a-table :columns='errcolumns' :dataSource='a.data.unormal' size='small' :pagination='pagination'
                                                     :locale="defaultSetting">
                                                <template slot="einfo" slot-scope="text,record">
                                                    <a-tooltip placement="top">
                                                        <template slot="title">
                                                            <span>{{record.error}}</span>
                                                        </template>
                                                        <p class="tt">{{record.error}}</p>
                                                    </a-tooltip>
                                                </template>
                                            </a-table>
                                        </a-tab-pane>
                                        <a-tab-pane key='2'>
                                            <span slot="tab">
                                                <!--无误节点-->
                                                <a-icon type="check-circle" theme='filled' style="color:green" />
                                                {{$t('Incorrect')}}{{$t('Node')}}
                                            </span>
                                            <p style="background-color: #EFF0F4; padding: 8px">{{$t('Node')}}</p>
                                            <a-row class='rightnode' :gutter='8'>
                                                <a-col v-for='i in a.data.normal' :key="i" :span='4'>
                                                    <p class='rnode'>{{i}}</p>
                                                </a-col>
                                            </a-row>
                                        </a-tab-pane>
                                    </a-tabs>
                                </a-collapse-panel>
                            </a-collapse>
                        </a-col>
                    </a-row>
                    </div>
                </a-tab-pane>
                <a-tab-pane :tab="$t('Data-check')" key='2'>
                    <!-- v-userAuth="'E4'" -->
                    <Cslice></Cslice>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </a-row>
</template>
<script>
import Cslice from '../../../components/operation/cluster/slice'
// import check from '../../../../static/images/svg/ic_check_normal.svg'
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
    name:'cluster',
    // template: '<a-icon :component = "check" />',
    components:{Cslice, EmptyData, NoAuthPage},
    data(){
        return{
            // check,
            activeKey:[],
            errcolumns:[
                {title:this.$t('Pool')+this.$t('Name'),dataIndex:'name',key:'name',sorter:(a,b)=>a.name.length - b.name.length,width:150},
                {title:this.$t('Type'),dataIndex:'error',key:'error',scopedSlots:{customRender:'einfo'}}
            ],
            pagination:{
                defaultPageSize:3,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                onShowSizeChange:(current,pageSize)=>this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            imgsrc:'',
            clusterdata:{
                // "cluster": "",
                // "services": [
                //     {
                //         "title": "",
                //         "data": {
                //             "normal": [],
                //             "unormal": []
                //         }
                //     },
                // ]
            },
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    methods:{
        scan(){
            this.activeKey = []
            this.imgsrc = true
            request('get', 'ops/service/ceph').then(res=>{
                this.clusterdata = res.data
                this.imgsrc = false
                for(let i = 0; i < this.clusterdata.services.length; i++) {
                    if(this.activeKey.indexOf(i) == -1) { // 不能插入重复值
                        this.activeKey.push(i)
                    }
                }
            })
        }
    },
    computed:{
			getlanguage(){
				return this.$store.state.language
			}
	  },
	  watch:{
        getlanguage(val){
            this.errcolumns=[
                {title:this.$t('Pool')+this.$t('Name'),dataIndex:'name',key:'name',sorter:(a,b)=>a.name.length - b.name.length,width:150},
                {title:this.$t('Type'),dataIndex:'error',key:'error',scopedSlots:{customRender:'einfo'}}
            ]
        }
    },
    mounted(){
        this.imgsrc = false
        // this.scan()
    }
}
</script>
<style>
.ant-tabs-bar{
    margin:0 !important
}
.check{
    background-color:#E7F3FF;height:8rem;
}
.val{
    color:#2B91FE;margin-top:1rem;font-weight: 700
}
.ant-collapse-content > .ant-collapse-content-box{
    padding:5px !important
}
.smileDark {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100px;
}
.ant-collapse{
    border:2px solid #2B91FE;
}
.tt{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    width: 250px;
}
.gif{
    padding:.5rem 1rem ; width:90%
}
.rightnode{
    overflow-y: auto;
    /* background-color: #EFF0F4 */
}
.rnode{
    background-color: #F2F8FE;
    padding:.5rem;
}
</style>
